<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素删除和插入操作</title>
		<!-- 元素删除和插入操作：针对  元素  增删改
		 append()           功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()          功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()            功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()           功能：在匹配元素集合中所有元素的外部前面插入内容  
		 
		 remove()           功能：使用前提：元素内容：删除元素
		 empty()            功能：使用前提：元素内容：清空元素
		 
		 replaceWith()      功能：
		 
		 -->
		 <style>
			 button{
				 margin: 5px;
				 padding: 10px 15px;
				 cursor: pointer;
			 }
			 body{
				 margin: 20px;
				 
			 }
			 #target{
				 border: 1px solid #9d9d9d;
				 border-radius: 5px ;
				 margin-top: 10px;
				 padding:10px ;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 7个按钮  div套p  div套p -->
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落~~</p>
		</div>
		<!-- 2.替换和插入的元素块区域-- 隐藏 -->
		<div id="newElement"   style="display: none;">
			<p>这是插入和替换的元素块段落~~</p>
		</div>
		<script>
			/* 1.点击 内部末尾插入按钮  实现  选框内末尾插入新元素 */
			$("#appendBtn").click(function(){
				//插入新增元素---1.1创建新元素--复制新元素 clone()
				//根据抓到的元素--复制出新元素--包含原有属性和样式
				var nw=$("#newElement").clone();
				//1.2复制div加p空间样式，含原有属性--显示 display：block
				nw.css("display","block");
				//1.3复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").append(nw);
			});
			/* 2.点击 内部末尾插入按钮  实现  选框内开头插入新元素 */
			$("#prependBtn").click(function(){
				var nw=$("#newElement").clone();
				nw.css("display","block");
				$("#target").prepend(nw);
			});
			/* 3.点击 外部末尾插入按钮  实现  选框外后面插入新元素 */
			$("#afterBtn").click(function(){
				var nw=$("#newElement").clone();
				nw.css("display","block");
				$("#target").after(nw);
			});
			/* 4.点击 外部末尾插入按钮  实现  选框外前面插入新元素 */
			$("#beforeBtn").click(function(){
				var nw=$("#newElement").clone();
				nw.css({"display":"block",
				"width":"200px",
				"height":"200px",
				"border-radius":"50%",
				"background":"#e4393c",
				"color":"transparent",
				"background-image":"url(../img/buy.png)",
				});
			$("#target").before(nw)
			});
	/* 5~6.点击  删除和清空元素  按钮  真实删除元素，以及清空元素*/
	$("#removeBtn").click(function(){
		var nw=$("#target").remove();
	});
	//6.
	$("#emptyBtn").click(function(){
		var nw=$("#target").empty();
	});
	//7.替换元素    按钮  将当前效果替换为新效果
	$("#replaceWithBtn").click(function(){
		//克隆 新元素效果
		var c=$("#newElement").clone().css("display","block");
		$("#target").replaceWith(c);
	});
	
		</script>
	</body>
</html>